import React, { PureComponent } from "react"
import "./MDrawer.less"
import { isNull } from "../../utils/helper"


//参数 open:是否打开  onOpenChange：控制open className：最外层class名 position：方向(left right top bottom)
export default class MDrawer extends PureComponent {
	constructor(props) {
		super(props);
		this.first = true;
		this.state = {
			open: false,
			inversePosition: {
				"left": "right",
				"right": "left",
				"top": "bottom",
				"bottom": "top"
			}
		}
	}

	componentWillReceiveProps(next) {
		let { open: open1 } = this.props;
		let { open: open2 } = next;
		if (open1 != open2) {
			if (open2) {
				// this.dom.addEventListener("touchstart", (e) => {
				// 	e.stopPropagation();  
				// })
				this.dom.addEventListener("touchmove", (e) => {
					e.stopPropagation()
				})
				this.dom.addEventListener("touchend", (e) => {
					e.stopPropagation()
				})
				try {
					//有WebkitOverflowScrolling:"touch" 时 内部MDrawer会有显示bug 需要设置成unset
					document.getElementsByClassName("mform")[0].style.WebkitOverflowScrolling = "unset";
				} catch (e) {
					console.log(e);
				};
				try {
					// 有transform的父节点的子元素 position:"fixed"不生效 需要设置display="inline" 或者 transform:"none"
					document.getElementsByClassName("am-pull-to-refresh-content")[0].style.display = "inline";
				}
				catch (e) {
					console.log(e);
				}
				document.body.style.overflow = "hidden";
			}
			else {
				this.dom.removeEventListener("touchstart", {})
				this.dom.removeEventListener("touchmove", {})
				this.dom.removeEventListener("touchend", {})
				setTimeout(() => {
					try {
						document.getElementsByClassName("mform")[0].style.WebkitOverflowScrolling = "touch";
					} catch (e) {
						console.log(e);
					};
					try {
						document.getElementsByClassName("am-pull-to-refresh-content")[0].style.display = "";
					}
					catch (e) {
						console.log(e);
					}
					document.body.style.overflow = "";
				}, 300)
			}
		}
	}
	render() {
		let { children, onOpenChange, closeDrawer, open = false, className, position, width = "70%", height = "70%", style = {} } = this.props;
		let { inversePosition } = this.state;
		if (isNull(position)) {
			position = "left"
		}
		if (isNull(inversePosition[position])) {
			position = "left"
		}
		let drawerStyle = {};
		let contentStyle = {
			[position]: 0
		};
		if (position == "left" || position == "right") {
			contentStyle = {
				...contentStyle,
				height: "100%",
				width
			}
		}
		else {
			contentStyle = {
				...contentStyle,
				width: "100%",
				height
			}
		}
		let drawerClass = "my-drawer";
		let wrapClass = "my-wrap";
		if (!open) {
			drawerClass += " my-drawer-close";
			wrapClass += " my-wrap-close";
			document.getElementById("root").style.overflow = "";
			contentStyle = {
				...contentStyle,
				[position]: "-200px"
			};
			drawerStyle = {
				...drawerStyle,
				[inversePosition[position]]: "100%"
			}
		}
		else {
			// document.getElementById("root").style.overflow = "hidden"
		}
		return (
			<div className={className} ref={e => this.dom = e}>
				<div className={wrapClass}>

				</div>
				<div
					className={drawerClass}
					onClick={(e) => {
						closeDrawer && closeDrawer();
						onOpenChange()
					}}
					style={drawerStyle}
				>
					<div className="content"
						onClick={(e) => {
							e.stopPropagation()
						}}
						data-flex="dir:top box:justify"
						style={{ ...contentStyle, ...style }}
					>
						{children}
					</div>
				</div>
			</div>
		)
	}
	componentWillUnmount() {
		this.dom.removeEventListener("touchstart",{})
		this.dom.removeEventListener("touchmove",{})
		this.dom.removeEventListener("touchend",{})
	}
}